<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
    <script type="text/javascript">
        LAMJS.run(function() {
            'use strict';
            var System=this;
            System.use();
            System.Loadcommon
                    .load({
                        'baseUrl':System.ROOT,
                        'css':[
                            '/css/lib.css'
                        ]
                    }).print();


            System.import([
                 '/Sport.class'
                ,'/Slider.class'
            ],System.classPath)
            .import(['/artTemplate/artTemplate'],System.PLUGINS);
        });
    </script>


    <style type="text/css">
        *{margin:0;padding:0;}
        html,body{height:100%;}
        .Area{ height: 100%;position: relative;overflow: hidden;margin:0 auto;}
        .pre,.next{position:absolute;top:50%;z-index: 100;cursor: pointer;}
        .pre{left:30px;}
        .next{right:30px;}
        .imgs{position: absolute;top: 0;left: 0;width: 100%; height: 100%;}
        .imgs .img{display: block;float: left;margin:0;}
        .imgs .img .border{ margin-right:5px;border:5px solid red;padding:10px;}
        .imgs .img .border.last{margin:0;}
        .imgs img{width:100%; }
    </style>

</head>
<body>
    <div class="Area">
        <i class="pre">上一个</i>
        <i class="next">下一个</i>
        <ul class="imgs clearfix" id="sliders">

        </ul>
    </div>
    <#include tp-data="{'content':'this is include'}" file="{{LAM.VIEWS}}/include/test.html" dataType="html" />

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

</body>

</html>
<script type="text/html" id="slider_tmpl">
    <% for(var i=0,len=list.length; i<len; i++){%>
    <li class="img">
        <div class="border">
            <img src="<%=list[i].src%>" />
        </div>

    </li>
    <% }%>
</script>


<script type="text/javascript">

    LAMJS.run(function(){
        'use strict';
        var System=this;
        var slider;

        function slider_f(){
            slider=new System.Slider({
                '$pre':$('.pre'),
                '$next':$('.next'),
                '$autoHandler':$('.Area'),
                '$ul':$('ul.imgs'),
                '$li':$('.img'),
                '$view':$('.Area'),
                'count':$('.img').length,
                'unit':'px',
                'moveNumber':1,
                'vcount':3,
                'position':'left',
                'autoMove':function(that,$autoHandler){
                    $autoHandler = $autoHandler || that.$autoHandler;
                    $autoHandler.hover(function(){
                        that.stop();
                    },function(){
                        that.begin();
                    });
                },

                'callback_event':function(){
                    var __this__ =this;

                    if(this.event) {
                        this['$next']['on']('click', function () {

                            __this__.next();
                        });

                        this['$pre']['on']('click', function () {
                            __this__.pre();


                        });

                    }


                }
            });
            slider.setSport(true);
            slider.run();
        }




        $(window).resize(function(){
            slider.resize();

        });

        $(function () {
            var renderPartial = template.compile($('#slider_tmpl').html());
            var html = renderPartial({
                list: [
                    {"src":"http://img0.bdstatic.com/img/image/shouye/mingxing0923.jpg"}
                    ,{"src":"http://img0.bdstatic.com/img/image/shouye/chongwu0923.jpg"}
                    ,{"src":"http://img0.bdstatic.com/img/image/shouye/dongman0923.jpg"}
                    ,{"src":"http://img0.bdstatic.com/img/image/shouye/touxiang0923.jpg"}
                    ,{"src":"http://img0.bdstatic.com/img/image/shouye/xiaoqingxin0923.jpg"}
                    ,{"src":"http://img0.bdstatic.com/img/image/shouye/dongman0923.jpg"}
                ]
            });
            $('#sliders').html(html);
            slider_f();

        });






    });
</script>





